<template>
  <div>
    <div class="header">
      <img src="@/assets/images/return.png" class="header_img" @click="back"/>
      <div class="title">职业方向</div>
      <div class="save" @click="saveBack">提交</div>
    </div>
    <div class="page-picker">
      <div class="page-picker-wrapper">
        <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="9"></mt-picker>
      </div>
    </div>
  </div>
</template>

<style>
  .page-picker-wrapper {
    background-color: #fff;
  }

  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }

  .save {
    font-size: 24px;
    color: #ffffff;
  }
</style>

<script type="text/babel">
  export default {
    name: 'ZhiYeFX',
    methods: {
      onAddressChange(picker, values) {
        let id = null
        let employ = []
        for(let i = 0; i <this.keys.length; i++){
          if(this.keys[i].name === values[0]){
            id = this.keys[i].id
          }
        }

        for(let j = 0 ; j < this.address.length; j++){
          if(this.address[j].parentID === id){
            employ.push(this.address[j])
          }
        }
        picker.setSlotValues(1, employ.map(function(elem){
          return elem.name
        }));

        for(let j = 0 ; j < this.address.length; j++){
          if(this.address[j].name === values[1]){
            console.log(this.address[j])
            this.position = this.address[j].name
            this.code = this.address[j].code
            break
          }
        }
      },
      back() {
        this.$router.back()
      },
      saveBack() {
        const data = {
          position: this.position,
          code: this.code
        }
        this.$store.commit('setDirection',data)
        this.$router.back()
      }
    },
    mounted() {
      // 获取职业方向列表
      let axios = this.$Axios
      axios.get(`/api/user/dictInfo/5`)
        .then(res => {
          if (res && res.data && res.data.dictData) {
            this.address = res.data.dictData
            this.keys = res.data.dictData.filter(function (elem, index) {
              if (elem.parentID === 0) {
                return true
              } else {
                return false
              }
            })
          }
          this.addressSlots[0].values = this.keys.map(function(elem){
            return elem.name
          })
        }).catch(err => {
        console.log(err)
      })
    },
    data() {
      return {
        code:null,
        address:[],
        keys: [],
        addressSlots: [
          {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['产品经理', '项目经理', '产品其他'],
            className: 'slot3',
            textAlign: 'center'
          }
        ],
        addressCity: '产品经理'
      };
    }
  };
</script>
